<template>
  <div>
    <h1 v-if="isTrue">查无此书，请检查书名是否正确</h1>
    <div v-if="isTrue == false" class="bookMain">
      <div class="bookList">
        <li v-for="(item, i) in bookList" :key="i">
          <img :src="item.avatar" alt="" />
          <div id="thisBook">
            <h3 id="bookname" @click="toBook(item._id)">{{ item.bookname }}</h3>
            <span>{{ item.writername }}-著</span>
            <span v-if="item.isend == 0">连载中</span>
            <span v-if="item.isend == 1">已完结</span>
          </div>
        </li>
      </div>
      <!-- 分页 -->
      <div class="block">
        <span class="demonstration">共有{{ isLength }}条记录</span>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          layout="prev, pager, next, jumper"
          :page-size="10"
          :total="isLength"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  created() {
    this.name = this.$route.params.name;
    this.searchBook();
  },
  data() {
    return {
      isTrue: false,
      bookList: [],
      isLength: 0,
      currentPage: 1,
      pageSize: 10,
    };
  },
  methods: {
    toBook(id){
      let routeUrl = this.$router.resolve(`/tobook/${id}`);
      window.open(routeUrl.href, "_blank");
    },

    async searchBook() {
      const { data: res } = await this.$http.get(`/books/searchBook`, {
        params: { bookname: this.$route.params.name,        
        pageSize: this.pageSize,
        currentPage: this.currentPage, },
      });
      if (res.data == "") {
        this.isTrue = true;
      } else {
        console.log(res);
        this.bookList = res.data;
        this.isLength = res.num;
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchBook();
    },
  },
};
</script>

<style lang="less" scoped>
li {
  list-style: none;
}
.bookMain {
  width: 100%;
  height: 100%;
}
.bookList {
  width: 100%;
  min-height: 1700px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bookList li {
  margin-top: 10px;
  padding: 8px;
  height: 162px;
  width: 640px;
  display: flex;
  border-bottom: solid 1px rgba(0, 0, 0, 0.39);
  img {
    width: 102px;
    height: 136px;
    margin-right: 8px;
    border: solid 1px rgba(0, 0, 0, 0.685);
    align-self: center;
  }
}
.bookList li:last-child {
  border-width: 0px;
}
#thisBook {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.block{
    text-align: center;
}
#bookname:hover{
    cursor: pointer;
    color: red;
}
</style>
